<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #userWalletApply {
        padding-bottom: 30px;
        background: #fff;
        border-radius: 10px 10px 0px 0px;
    }

    .custom-tabs-wrap {
        padding: 12px 24px 0;
        border-bottom: 2px solid #e6e6e6;
        margin-bottom: 20px;
        position: relative;
    }

    .custom-tabs-wrap .el-tabs__header {
        margin: 0;
    }

    .custom-tabs-wrap .tabs-export {
        position: absolute;
        top: 24px;
        right: 24px;
        color: #7438D5;
        cursor: pointer;
    }

    .custom-tabs-wrap .tabs-export i {
        margin-right: 6px;
    }

    .custom-filter-wrap {
        flex-wrap: wrap;
        padding: 0 24px;
    }

    .custom-filter-wrap .custom-refresh-button {
        margin-bottom: 14px;
        margin-right: 14px;
    }

    .custom-table-wrap {
        margin: 0 24px;
    }

    .pagination-container {
        justify-content: space-between;
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/clipboard.min.js"></script>
<div id="userWalletApply" v-cloak>
    <div class="custom-tabs-wrap">
        <el-tabs v-model="fstatus" @tab-click="changeStatus">
            <el-tab-pane label="已申请" name="0"></el-tab-pane>
            <el-tab-pane label="已开具" name="1"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="custom-filter-wrap display-flex">
        <div class="custom-refresh display-flex custom-refresh-button" @click="getData(0,10)">
            <i class="el-icon-refresh"></i>
        </div>
    </div>
    <div class="custom-table-wrap">
        <el-table ref="multipleTable" :data="tableData" border stripe @selection-change="tableSelect">
            <el-table-column type="selection" width="40" align="center">
            </el-table-column>
            <el-table-column prop="id" min-width="74" label="ID">
            </el-table-column>
            <el-table-column min-width="120" label="类型" align="left">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.type=='person'?'':'warning'" effect="dark" size="small">
                        {{scope.row.type_text}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column min-width="200" label="抬头名称" align="left">
                <template slot-scope="scope">
                    <div class="ellipsis-item">{{scope.row.header_name}}</div>
                </template>
            </el-table-column>
            <el-table-column min-width="170" label="纳税人识别号">
                <template slot-scope="scope">
                    {{scope.row.tax_no?scope.row.tax_no:'-'}}
                </template>
            </el-table-column>
            <el-table-column width="120" label="手机号" align="left">
                <template slot-scope="scope">
                    {{scope.row.mobile}}
                </template>
            </el-table-column>
            <el-table-column min-width="140" label="总金额" align="left">
                <template slot-scope="scope">
                    {{scope.row.amount}}元
                </template>
            </el-table-column>
            <el-table-column min-width="140" label="申请用户" align="left">
                <template slot-scope="scope">
                    <div v-if="scope.row.user" class="ellipsis-item">
                        {{scope.row.user.nickname}}
                    </div>
                    <span v-if="!scope.row.user">-</span>
                </template>
            </el-table-column>
            <el-table-column min-width="210" label="所属订单" align="left">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.order" type="text" @click="openOrderDetail(scope.row.order_id)">
                        {{scope.row.order.order_sn}}
                    </el-button>
                    <span v-if="!scope.row.order"></span>
                </template>
            </el-table-column>
            <el-table-column width="150" label="申请时间">
                <template slot-scope="scope">
                    {{moment(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                </template>
            </el-table-column>
            <el-table-column width="150" label="处理时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.updatetime">
                        {{moment(scope.row.updatetime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column min-width="100" fixed="right" label="操作" align="left">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status==0" type="text" @click="confirmRow(scope.row.id)">确认开具</el-button>
                    <span v-if="scope.row.status==1">-</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <div>
                <el-checkbox class="table-checked-all" :indeterminate="isIndeterminate"
                    :disabled="multipleSelection.length==0" v-model="tableCheckedAll" @change="changeCheckedAll">
                </el-checkbox>
                <el-button :type="multipleSelection.length>0?'primary':''" :disabled="multipleSelection.length==0" plain
                    size="small" @click="batchComfirm()">确认开具
                </el-button>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>